import BaseView from "../baseView.js";

export default class MoviesView extends BaseView {
  render() {
    $('#Content').html(`
            <h1>电影管理</h1>
            <hr>

            <select name="city" lay-verify="" style="height:35px;margin: 10px 0px 15px 15px" id='selectType'>
                <option value="">分类查找</option>
                <option value="types">电影类型</option>
                <option value="area">首映地区</option>
                <option value="upDate">上映时间</option>
            </select>  

            <input type="text" name="title" id='find_content' required lay-verify="required" placeholder="请输入查找内容" autocomplete="off" class="layui-input"  style="height:35px;margin: 10px 0px 15px 15px;width:128px"> 
            
            <button id='find_btn' style="margin: 10px 0px 15px 15px" class='layui-btn layui-btn-danger'>
            查询
            </button> 
            
            <button id='addstudentBtn' style="margin: 10px 0px 15px 15px" class='layui-btn layui-btn-normal'>
            添加
            </button> 
            <table id="showDatas" lay-filter="showlayui"></table>
        `);

  }

  handle() {
    $("#addLayuijs").html(`
       
          <script type="text/html" id="toolDemo">
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
          </script>
    

          <script>     
          layui.use('table', function(){
            var table = layui.table;
            //监听行工具事件
            //test 是 table 原始容器的属性 lay-filter="对应的值"
            table.on('tool(showlayui)', function(obj){
              //obj.data 指的就是一行数据 
              var data = obj.data;   //一行数据就是一个json对象
              //console.log(obj)
              if(obj.event === 'del'){  //当点击删除时
                layer.confirm('真的要删除此行么？', function(index){
                  obj.del();    //只删除对应行（tr）的DOM结构并更新缓存，但并没有在数据库中删除
                  layer.close(index);
                  //向服务端发送删除指令
                  console.log(data._id)
                  $.ajax({
                    type:'delete',
                    url:'/movies/deletemov/'+data.cname,
                    dataType:'json',
                    success:(data)=>{
                      console.log(data);
                      if(data.code){
                        alert(data.msg);
                        window.location.hash="#/main/showmovies"
                      }else{
                        alert(data.msg);
                      }
                    }
                  });
    
                });
              } else if(obj.event === 'edit'){   //当点击编辑时
                console.log("======>>>>编辑")
                window.location.hash="#/main/updatemovies/"+data._id
              }
            });
          
            //第一个实例
            table.render({
              elem: '#showDatas'
              ,url: '/movies/queryall' //数据接口
              ,cols: [[ //表头
                {field: '_id', title: '电影编号', fixed: 'left'}
                ,{field: 'cname', title: '中文名字',}
                ,{field: 'ename', title: '英文名字'}
                ,{field: 'types', title: '电影类型',} 
                ,{field: 'area', title: '首映地区',}
                ,{field: 'poster', title: '海报',}
                ,{field: 'time', title: '电影时长',}
                ,{field: 'upDate', title: '上映时间',}
                ,{field: 'score', title: '评分',}
                ,{field: 'count', title: '票房',}
                ,{field: 'intro', title: '简介',}
                ,{field: 'isClassic', title: '是否经典',}
                ,{field: 'director', title: '导演',}
                ,{field: 'actor', title: '演员',}
                ,{field: 'images', title: '影集',}
                //绑定工具栏
                ,{fixed: 'right', title:'操作', toolbar: '#toolDemo',width:'130'}
    
              ]]
              ,page:true
            });
            
          });
          </script>
        `)

    //给添加按钮绑事件
    $("#addstudentBtn").click(() => {
      window.location.hash = "#/main/addmovies";
    })


    //查询绑定事件
      $('#find_btn').click(() => {
        console.log(selectType.value)
        console.log($('#find_content').val());
        $.ajax({
          type:'get',
          url:`movies/querytype/${selectType.value}/${$('#find_content').val()}`,
          dataType:'json',
          success:(data)=>{
            $("#addLayuijs").html(`
            <script type="text/html" id="toolDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
      
  
            <script>     
            layui.use('table', function(){
              var table = layui.table;
              //监听行工具事件
              //test 是 table 原始容器的属性 lay-filter="对应的值"
              table.on('tool(showlayui)', function(obj){
                //obj.data 指的就是一行数据 
                var data = obj.data;   //一行数据就是一个json对象
                //console.log(obj)
                if(obj.event === 'del'){  //当点击删除时
                  layer.confirm('真的要删除此行么？', function(index){
                    obj.del();    //只删除对应行（tr）的DOM结构并更新缓存，但并没有在数据库中删除
                    layer.close(index);
                    //向服务端发送删除指令
                    console.log(data._id)
                    $.ajax({
                      type:'delete',
                      url:'/movies/deletemov/'+data.cname,
                      dataType:'json',
                      success:(data)=>{
                        console.log(data);
                        if(data.code){
                          alert(data.msg);
                          window.location.hash="#/main/showmovies"
                        }else{
                          alert(data.msg);
                        }
                      }
                    });
      
                  });
                } else if(obj.event === 'edit'){   //当点击编辑时
                  console.log("======>>>>编辑")
                  window.location.hash="#/main/updatemovies/"+data._id
                }
              });
            
              //第一个实例
              table.render({
                elem: '#showDatas'
                ,url: 'movies/querytype/${selectType.value}/${$('#find_content').val()}' //数据接口
                ,cols: [[ //表头
                  {field: '_id', title: '电影编号', fixed: 'left'}
                  ,{field: 'cname', title: '中文名字',}
                  ,{field: 'ename', title: '英文名字'}
                  ,{field: 'types', title: '电影类型',} 
                  ,{field: 'area', title: '首映地区',}
                  ,{field: 'poster', title: '海报',}
                  ,{field: 'time', title: '电影时长',}
                  ,{field: 'upDate', title: '上映时间',sort:true}
                  ,{field: 'score', title: '评分',sort:true}
                  ,{field: 'count', title: '票房',sort:true}
                  ,{field: 'intro', title: '简介',}
                  ,{field: 'isClassic', title: '是否经典',}
                  ,{field: 'director', title: '导演',}
                  ,{field: 'actor', title: '演员',}
                  ,{field: 'images', title: '影集',}
                  //绑定工具栏
                  ,{fixed: 'right', title:'操作', toolbar: '#toolDemo',width:'130'}
      
                ]]
                ,page:true
              });
              
            });
            </script>
          `)
          }
        })
      })
  }
}